<template>
	<view>
		<view style="padding: 20rpx 40rpx;">


			<u--form labelPosition="left" :model="bindParams" ref="uForm" labelWidth='110' labelAlign='right'>
				<u-form-item label="会员卡号：" borderBottom ref="item1">
					<u--input name="会员卡号" required placeholder="会员卡号" v-model="bindParams.cardCode" />
				</u-form-item>
				<u-form-item label="会员卡手机号：" borderBottom ref="item2">
					<u--input name="会员卡手机号" required placeholder="请填写会员卡手机号" v-model="bindParams.phone" />
				</u-form-item>
				<u-form-item label="密码：" borderBottom ref="item4">
					<u--input name="密码" password required placeholder="密码" v-model="bindParams.password" />
				</u-form-item>
				<u-form-item label="验证码：" borderBottom>
					<u-input placeholder="请输入短信验证码" v-model="smsValue">

						<template slot="suffix">
							<!-- <u-code ref="uCode" @change="codeChange" seconds="20" :changeText=""></u-code> -->
							<u-button @click="sendVertifyCode" :disabled="!canSend" type="primary"
								size="mini">{{sendText}}</u-button>
						</template>

					</u-input>
				</u-form-item>

			</u--form>
		</view>

		<view style="padding: 20rpx 40rpx;">
			<u-button shape="circle" type="primary" block @click="check">
				立即绑卡
			</u-button>
		</view>

	</view>
</template>

<script>
	import {
		UserBindCard,
		checkCode,
		sendCode,
		bindMemberCard
	} from '../../common/http/api.js'
	import {
		checkPhone
	} from '../../common/formCheck.js'
	export default {
		data() {
			return {
				bindParams: {
					cardCode: "",
					password: "",
					phone: this.$store.state.userPhone || '',
					openId: uni.getStorageSync("openId"),

				},
				sendText: "发送验证码",
				canSend: true,
				smsValue: '',
				sendCodeData: {
					openId: uni.getStorageSync("openId"),
					phone: this.$store.state.userPhone || ''
				},
				checkStatus: false
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$store.state.cinemaName
			})
		},
		methods: {
			bindCard() {
				if (this.bindParams.openId) {
					UserBindCard(this.bindParams).then(res => {
						const {
							code,
							msg
						} = res
						if (code === '000') {
							uni.showToast({
								title: msg,
								icon: "none",
								duration: 2000
							})
							// setTimeout(() => {
							// 	uni.redirectTo({
							// 		url: "../cardList/cardList"
							// 	})
							// }, 2000)
							// bindMemberCard(this.bindParams).then(res=>{

							// })
						} else {
							uni.showToast({
								title: msg,
								icon: "none",
								duration: 2000
							})
						}
					})
				}
			},
			check() {
				const {
					cardCode,
					password,
					phone,

				} = this.bindParams
				const smsValue = this.smsValue
				if (!cardCode.trim().length) {
					uni.showToast({
						title: '请输入会员卡号',
						icon: "none"
					});
					return false
				} else if (!checkPhone(phone)) {
					uni.showToast({
						title: '手机号错误',
						icon: "none"
					});
					return false
				} else if (smsValue.length < 4) {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
					return
				} else if (password.trim().length < 4) {
					uni.showToast({
						title: '密码长度需大于4',
						icon: "none"
					});
					return false
				}
				this.checkVertifyCode()



			},
			inputCardCode(e) {
				this.bindParams.cardCode = e.detail
			},
			inputPhone(e) {
				this.bindParams.phone = e.detail
				this.sendCodeData.phone = e.detail
			},
			inputPassword(e) {
				this.bindParams.password = e.detail
			},
			changeSms(e) {
				this.smsValue = e.detail
			},
			sendVertifyCode() {
				this.canSend = false
				let time = 30
				const timer = setInterval(() => {
					time--;
					this.sendText = `${time}后重新发送`
					if (time == 0) {
						this.canSend = true
						this.sendText = "发送验证码"
						clearInterval(timer)
					}
				}, 1000)
				sendCode(this.sendCodeData).then(res => {
					const {
						code,
						msg
					} = res
					if (code === "SUCCESS") {
						uni.showToast({
							title: "验证码已发送",
							icon: "none"
						})
					} else {
						uni.showToast({
							title: msg,
							icon: "none"
						})

					}
				})
			},
			checkVertifyCode() {
				checkCode({
					...this.sendCodeData,
					smsValue: this.smsValue
				}).then(res => {
					const {
						code,
						msg
					} = res
					if (code === "FAIL") {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
					} else if (code === "SUCCESS") {
						this.checkStatus = true
						this.bindCard()
					}
				})


			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
		}
	}
</script>

<style lang="scss">
	._btn {
		margin: 100rpx 0 0 3vw;
		width: 94vw;
	}
</style>